<template>
  <div class="home">
    <div class="left">
      <div class="left-one">
        <div class="tou">
          <img v-show="ProfileList.profile.staffPhoto" :src="ProfileList.profile.staffPhoto" />
          <img v-show="!ProfileList.profile.staffPhoto" src="@/assets/img/公司图标.png" />
          <div class="xinxi">
            <div>
              <span class="name">江苏传智播客教育科技股份有限公司</span>
              <span class="h">体验版</span>
            </div>
            <span class="h">{{ ProfileList.profile.username }}</span>
            <span class="h">|</span>
            <span class="h">{{ ProfileList.profile.company }}</span>
          </div>
        </div>
        <div class="cont">
          <div class="box">
            <div>组织总人数</div>
            <div class="math">
              <div v-if="renshu.employeeTotal">
                <AnimatedNumber from="0" :to="renshu.employeeTotal" :duration="1000"></AnimatedNumber>
              </div>
              <div v-else>0</div>
            </div>
          </div>
          <div class="box">
            <div>正式员工</div>
            <div class="math">
              <div v-if="renshu.employeeTotal">
                <AnimatedNumber from="0" :to="renshu.regularEmployeeTotal" :duration="1000"></AnimatedNumber>
              </div>
              <div v-else>0</div>
            </div>
          </div>
          <div class="box">
            <div>合同待签署</div>
            <div class="math">
              <div v-if="renshu.employeeTotal">
                <AnimatedNumber from="0" :to="renshu.contractSignTotal" :duration="1000"></AnimatedNumber>
              </div>
              <div v-else>0</div>
            </div>
          </div>
          <div class="box">
            <div>待入职</div>
            <div class="math">
              <div v-if="renshu.employeeTotal">
                <AnimatedNumber from="0" :to="renshu.toBeEmployed" :duration="1000"></AnimatedNumber>
              </div>
              <div v-else>0</div>
            </div>
          </div>
          <div class="box">
            <div>本月转正</div>
            <div class="math">
              <div v-if="renshu.employeeTotal">
                <AnimatedNumber from="0" :to="renshu.toBeConfirmed" :duration="1000"></AnimatedNumber>
              </div>
              <div v-else>0</div>
            </div>
          </div>
          <div class="box">
            <div>本月待离职</div>
            <div class="math">
              <div v-if="renshu.employeeTotal">
                <AnimatedNumber from="0" :to="renshu.toBeDismissed" :duration="1000"></AnimatedNumber>
              </div>
              <div v-else>0</div>
            </div>
          </div>
          <div class="box">
            <div>接口总访问</div>
            <div class="math">
              <div v-if="renshu.employeeTotal">
                <AnimatedNumber from="0" :to="renshu.interfaceAccessTotal" :duration="1000"></AnimatedNumber>
              </div>
              <div v-else>0</div>
            </div>
          </div>
        </div>
      </div>
      <div class="left-two">
        <div class="tou">快捷入口</div>
        <div class="cont">
          <div class="box" @click="router.push('/examine')">
            <img src="@/assets/img/假期审批.png" alt="" />
            <div>假期审批</div>
          </div>
          <div class="box" @click="router.push('/social')">
            <img src="@/assets/img/社保.png" alt="" />
            <div>社保管理</div>
          </div>
          <div class="box" @click="router.push('/role')">
            <img src="@/assets/img/角色管理.png" alt="" />
            <div>角色管理</div>
          </div>
          <div class="box" @click="router.push('/addStaff')">
            <img src="@/assets/img/添加员工.png" alt="" />
            <div>添加员工</div>
          </div>
          <div class="box" @click="router.push('/authority')">
            <img src="@/assets/img/权限.png" alt="" />
            <div>添加权限</div>
          </div>
        </div>
      </div>
      <div class="left-tree">
        <div class="tou">
          <div v-if="renshu.employeeTotal">
            <AnimatedNumber from="0" :to="socialInsurance.category" :duration="1000"></AnimatedNumber>
          </div>
          <div v-else>0</div>
        </div>
        <div class="cont">
          <div class="le">
            <div>
              <span> 申报人数 </span>
              <div class="declarationTotal">
                <div v-if="renshu.employeeTotal">
                  <AnimatedNumber from="0" :to="socialInsurance.declarationTotal" :duration="1000"></AnimatedNumber>
                </div>
                <div v-else>0</div>
              </div>
            </div>
            <div class="box">
              <div class="">
                <span>带申报（人）</span>
                <div class="math">
                  <div v-if="renshu.employeeTotal">
                    <AnimatedNumber from="0" :to="socialInsurance.toDeclareTotal" :duration="1000"></AnimatedNumber>
                  </div>
                  <div v-else>0</div>
                </div>
              </div>
              <div class="">
                <span>申报中（人）</span>
                <div class="math">
                  <div v-if="renshu.employeeTotal">
                    <AnimatedNumber from="0" :to="socialInsurance.declaringTotal" :duration="1000"></AnimatedNumber>
                  </div>
                  <div v-else>0</div>
                </div>
              </div>
              <div class="">
                <span>已申报（人）</span>
                <div class="math">
                  <div v-if="renshu.employeeTotal">
                    <AnimatedNumber from="0" :to="socialInsurance.declaredTotal" :duration="1000"></AnimatedNumber>
                  </div>
                  <div v-else>0</div>
                </div>
              </div>
            </div>
          </div>
          <div class="ri">
            <!-- echthes -->
            <div class="" id="main"></div>
          </div>
        </div>
      </div>
      <div class="left-tree">
        <div class="tou">{{ providentFund.category }}</div>
        <div class="cont">
          <div class="le">
            <div>
              <span> 申报人数 </span>
              <div class="declarationTotal">
                {{ providentFund.declarationTotal }}
              </div>
            </div>
            <div class="box">
              <div class="">
                <span>带申报（人）</span>
                <div class="math">
                  {{ providentFund.toDeclareTotal }}
                </div>
              </div>
              <div class="">
                <span>申报中（人）</span>
                <div class="math">
                  {{ providentFund.declaringTotal }}
                </div>
              </div>
              <div class="">
                <span>已申报（人）</span>
                <div class="math">
                  {{ providentFund.declaredTotal }}
                </div>
              </div>
            </div>
          </div>
          <div class="ri">
            <!-- echthes -->
            <div class="" id="main1"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="right-one">
        <div class="le">
          <div class="tou">帮助链接</div>
          <div class="li">
            <img src="@/assets/icon/指南.svg" alt="" />
            <span>入门指南</span>
          </div>
          <div class="li">
            <img src="@/assets/icon/帮助手册.svg" alt="" />
            <span>在线帮助手册</span>
          </div>
          <div class="li">
            <img src="@/assets/icon/电话.svg" alt="" />
            <span>联系技术支持</span>
          </div>
          <div class="li">
            <img src="@/assets/icon/添加.svg" alt="" />
            <span>添加链接</span>
          </div>
        </div>
        <div class="ri">
          <div
            :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }"
          >
          <!-- //##日历 -->
            <a-calendar :fullscreen="false" valueFormat="YYYY年MM月DD日" v-model:value="timeValue" @change="onChange">
              <template #headerRender="{ value: current, type, onChange, onTypeChange }">
               <div>{{ timeValue }}</div>
               <!-- <div>{{ value }}</div>
               <div>{{ type }}</div> -->
              </template>
            </a-calendar>
          </div>
        </div>
      </div>
      <div class="right-tow">
        <div class="tou">通知公告</div>
        <div class="li">
          <div class="le">
            <img src="@/assets/icon/苹果.svg" alt="" />
          </div>
          <div class="ri">
            <div class="q">
              <span class="name">传智</span>
              <span class="hui">发布了</span>
              <span class="title"> 第1期“传智大讲堂”互动讨论获奖名单</span>
            </div>
            <div>
              <span class="time">2022-10-21 15:21:38</span>
            </div>
          </div>
        </div>
        <div class="li">
          <div class="le">
            <img src="@/assets/icon/苹果.svg" alt="" />
          </div>
          <div class="ri">
            <div class="q">
              <span class="name">黑马程序员</span>
              <span class="hui">发布了</span>
              <span class="title"> 第149期“vue实战”获奖小组名单,并颁发证书</span>
            </div>
            <div>
              <span class="time">2022-10-21 15:21:38</span>
            </div>
          </div>
        </div>
        <div class="li">
          <div class="le">
            <img src="@/assets/icon/苹果.svg" alt="" />
          </div>
          <div class="ri">
            <div class="q">
              <span class="name">黑马程序员</span>
              <span class="hui">发布了</span>
              <span class="title"> 第161期“React实战”开发的流程和规则</span>
            </div>
            <div>
              <span class="time">2022-10-21 15:21:38</span>
            </div>
          </div>
        </div>
        <div class="li">
          <div class="le">
            <img src="@/assets/icon/苹果.svg" alt="" />
          </div>
          <div class="ri">
            <div class="q">
              <span class="name">传智</span>
              <span class="hui">发布了</span>
              <span class="title"> 第1期“传智大讲堂”的参赛名单</span>
            </div>
            <div>
              <span class="time">2022-07-21 15:21:38</span>
            </div>
          </div>
        </div>
        <div class="li">
          <div class="le">
            <img src="@/assets/icon/苹果.svg" alt="" />
          </div>
          <div class="ri">
            <div class="q">
              <span class="name">传智</span>
              <span class="hui">发布了</span>
              <span class="title"> 第1期“传智大讲堂”互动讨论获奖名单</span>
            </div>
            <div>
              <span class="time">2022-10-21 15:21:38</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
let router = useRouter()
import { routerArray } from "@/router/index";
import axios from "@/utils/request";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";
import { Profile } from "@/stores/index"
// import AnimateNumber from 'vue-animate-number'
let ProfileList = Profile()
console.log(ProfileList.profile);

let timeValue = ref('')
let socialInsurance = ref({}); //社保申报数据
let providentFund = ref({}); //公积金申报数据
let renshu = ref({
  employeeTotal: 0,
  regularEmployeeTotal: 0,
  contractSignTotal: 0,
  toBeEmployed: 0,
  toBeConfirmed: 0,
  toBeDismissed: 0,
  interfaceAccessTotal: 0,
});
let profile = ref({});

onMounted(() => {
  getXinxi(); //获取首页展示信息
  // getProfile(); //任务信息

});

// 当月份变化的时候
const onChange = (date, mode) => {
  console.log(date, mode);
};

function getXinxi() {
  axios.get("/home/data").then((res) => {
    // console.log(res);
    if (res.success) {
      socialInsurance.value = res.data.socialInsurance;
      providentFund.value = res.data.providentFund;
      renshu.value.employeeTotal = res.data.employeeTotal;
      renshu.value.regularEmployeeTotal = res.data.regularEmployeeTotal;
      renshu.value.contractSignTotal = res.data.contractSignTotal;
      renshu.value.toBeEmployed = res.data.toBeEmployed;
      renshu.value.toBeConfirmed = res.data.toBeConfirmed;
      renshu.value.toBeDismissed = res.data.toBeDismissed;
      renshu.value.interfaceAccessTotal = res.data.interfaceAccessTotal;
      //##社保的eCharts
      var myChart = echarts.init(document.getElementById("main"));
      //##公积金的eCharts
      var myChart1 = echarts.init(document.getElementById("main1"));
      window.addEventListener('resize', function () {
        myChart.resize();
        myChart1.resize();
      });

      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: socialInsurance.value.xAxis,
        },
        yAxis: {
          type: "value",
          data: [100, 200, 300, 400],
        },
        series: [
          {
            data: socialInsurance.value.yAxis,
            type: "line",
            areaStyle: {
              color: "rgb(216, 252, 251)",
            },
            showSymbol: false,
          },
        ],
        lineStyle: {
          width: 2,
          color: "rgb(103, 235, 228)",
        },
      });

      // 绘制图表
      myChart1.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: providentFund.value.xAxis,
        },
        yAxis: {
          type: "value",
          data: [100, 200, 300, 400],
        },
        series: [
          {
            data: providentFund.value.yAxis,
            type: "line",
            areaStyle: {
              color: "rgb(216, 252, 251)",
            },
            showSymbol: false,
          },
        ],
        lineStyle: {
          width: 2,
          color: "rgb(103, 235, 228)",
        },
      });
    }
  });
}
function getProfile() {
  axios.get("/sys/profile").then((res) => {
    if (res.success) {
      profile.value = res.data;
    }
  });
}

</script>

<style scoped lang="scss">
.home {
  display: flex;
  justify-content: space-between;

  .left {
    width: 55%;

    .left-one {
      background-color: #fff;
      padding: 15px;

      .tou {
        display: flex;

        img {
          height: 40px;
          width: 40px;
          border-radius: 10px;
        }

        .xinxi {
          margin-left: 25px;
          margin-bottom: 25px;

          .name {
            font-size: 18px;
            margin-bottom: 8px;
            display: inline-block;
          }

          .h {
            margin-left: 10px;
            color: rgb(150, 155, 167);
          }
        }
      }

      .cont {
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;

        .box {
          width: 20%;
          margin: 10px;
          text-align: center;

          .math {
            font-size: 25px;
            margin: 10px;
          }
        }
      }
    }

    .left-two {
      background-color: #fff;
      margin-top: 10px;
      padding: 20px;

      .tou {
        height: 30px;
      }

      .cont {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .box {
          text-align: center;

          img {
            height: 50px;
            width: 50px;
            margin: 10px 0;
          }
        }
      }
    }

    .left-tree {
      background-color: #fff;
      margin-top: 10px;
      padding: 20px 20px 10px 20px;

      .tou {
        line-height: 30px;
      }

      .cont {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .le {
          width: 50%;
          padding: 10px;

          .declarationTotal {
            font-size: 30px;
            color: rgb(4, 201, 190);
            margin: 15px 0;
          }

          .box {
            background-color: rgb(245, 246, 248);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding: 15px;

            .math {
              font-size: 30px;
              margin: 10px 0;
            }
          }

          .box>div {
            width: 120px;
          }
        }

        .ri {
          width: 50%;
          padding: 10px;

          #main {
            height: 320px;
            width: 100%;
            div{
              width: 100%;
            }
          }

          #main1 {
            height: 320px;
            width: 100%;

            div {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .right {
    width: 44%;

    .right-one {
      display: flex;
      justify-content: space-between;

      .le {
        width: 50%;
        padding: 10px;
        background-color: #fff;

        .tou {
          height: 30px;
          line-height: 30px;
          margin-bottom: 25px;
        }

        .li {
          height: 50px;
          background-color: rgb(245, 246, 248);
          margin: 10px 0;
          line-height: 50px;
          padding-left: 20px;
          border-radius: 10px;

          img {
            height: 16px;
            width: 16px;
          }
        }
      }

      .ri {
        width: 49%;
        background-color: #fff;
      }
    }

    .right-tow {
      padding: 20px;
      margin-top: 10px;
      background-color: #fff;

      .tou {
        line-height: 30px;
        margin-bottom: 15px;
      }

      .li {
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: start;
        padding: 15px;

        .le {

          // line-height: 60px;
          img {
            height: 16px;
            width: 16px;
          }
        }

        .ri {
          margin-left: 20px;

          .q {
            // height: 50px;
            margin-bottom: 25px;
          }

          .name {
            color: rgb(107, 156, 252);
          }

          .hui {
            color: rgb(196, 199, 214);
          }

          .time {
            color: rgb(196, 199, 214);
            margin-bottom: 10px;
          }
        }
      }
    }
  }
}
</style>
